import { Modal } from 'antd'
import { useSelector, useDispatch } from 'react-redux'
import { CheckCircleFilled } from '@ant-design/icons'
import { setColorPrimary } from '@/store/slices/theme'
import { globalConfig } from '@/globalConfig'
import './themeModal.styl'

function ThemeModal({ onClose }) {
  const dispatch = useDispatch()
  const theme = useSelector(state => state.theme)

  return (
    <Modal className='M-themeModal' open={ true } title="主题色" onCancel={ () => { onClose() } } maskClosable={ false } footer={ null }>
      <div className='colors-con'>
        {
          globalConfig.customColorPrimarys && globalConfig.customColorPrimarys.map((item, index) => {
            return (
              <div className="theme-color" style={{ backgroundColor: item }} key={ index } onClick={ () => { dispatch(setColorPrimary(item)) } }>
                { theme.colorPrimary === item && (<CheckCircleFilled style={{ fontSize: 28, color: '#fff' }} />) }
              </div>
            )
          })
        }
      </div>
    </Modal>
  )
}

export default ThemeModal
